<template>
  <Card title="志愿服务 - 编辑">
    <Form :model="saveCuVolunteersBO" :label-width="100"  :rules="ruleValidate" style="width: 60vw" ref="formValidate">
      <FormItem label="招募人数:"  style="width: 20vw" >
        <InputNumber :max="500" :min="1" v-model="saveCuVolunteersBO.cuVolunteersCountRecruiting" placeholder="请输入招募人数" style="width: 14.5vw"></InputNumber>
      </FormItem>
      <FormItem label="标题:"  style="width: 20vw" prop="cuVolunteersTitle">
        <Input v-model="saveCuVolunteersBO.cuVolunteersTitle" placeholder="请输入标题"></Input>
      </FormItem>
      <FormItem label="标签:" style="width: 20vw" >
        <Select v-model="saveCuVolunteersBO.cuVolunteersCategoryId" >
          <Option v-for="item in cityList" :value="item.cuVolunteersCategoryId" :key="item.cuVolunteersCategoryId">{{ item.cuVolunteersCategoryName }}</Option>
        </Select>
      </FormItem>
      <FormItem label="活动时间:" style="width: 20vw">
        <DatePicker type="datetimerange" :options="options3" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择开始结束时间" style="width: 15.5vw" v-model="saveCuVolunteersBO.dateLimit"></DatePicker>
      </FormItem>
      <FormItem label="联系人:"  style="width: 20vw" prop="cuVolunteersContact">
        <Input v-model="saveCuVolunteersBO.cuVolunteersContact" placeholder="请输入联系人"></Input>
      </FormItem>
      <FormItem label="联系电话:"  style="width: 20vw" prop="cuVolunteersPhone">
        <Input v-model="saveCuVolunteersBO.cuVolunteersPhone" placeholder="请输入联系电话"></Input>
      </FormItem>
      <FormItem label="报名截止时间:"  style="width: 20vw">
        <DatePicker v-model="saveCuVolunteersBO.cuVolunteersStop" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择截止时间" style="width: 15.5vw"></DatePicker>
      </FormItem>
      <FormItem label="报名限制:"  style="width: 20vw" prop="cuVolunteersLimit">
        <Input v-model="saveCuVolunteersBO.cuVolunteersLimit" :maxlength="100" :show-word-limit="true" type="textarea" ></Input>
      </FormItem>
      <FormItem label="详细地址:"  style="width: 20vw" prop="cuVolunteersAddress">
        <Input v-model="saveCuVolunteersBO.cuVolunteersAddress" placeholder="请输入详细地址"></Input>
      </FormItem>
      <FormItem label="活动简介:"  style="width: 20vw" prop="cuVolunteersIntroduction">
        <Input v-model="saveCuVolunteersBO.cuVolunteersIntroduction" placeholder="请输入活动简介"></Input>
      </FormItem>
      <FormItem label="添加封面:" >
        <div class="demo-upload-list" v-if="hasImage">
          <img :src="imageUrl"  />
          <div class="demo-upload-list-cover">
            <Icon type="ios-eye-outline" @click.native="handleView(imageUrl)"></Icon>
            <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
          </div>
        </div>
        <Upload
          :action="actionUrl"
          :format="['jpg','jpeg','png']"
          :max-size="2048"
          :on-exceeded-size="handleMaxSize"
          :on-success="handleSuccess"
          :show-upload-list="false"
          style=" width:58px;">
          <Button icon="ios-cloud-upload-outline">上传图片</Button>
        </Upload>
      </FormItem>
      <FormItem label="服务内容:">
        <editor :cache="false" ref="editor" :value="saveCuVolunteersBO.cuVolunteersServiceContent" @on-change="handleChange"/>
      </FormItem>
      <FormItem >
        <Button type="primary" @click="save('formValidate')">保存</Button>
      </FormItem>
    </Form>
    <Modal title="图片预览" v-model="visible">
      <img :src="showImageUrl" v-if="visible" style="width: 100%" />
    </Modal>
  </Card>
</template>

<script>

import Editor from '_c/editor/editor'
export default {
  name: 'volunteers-add',
  components: { Editor },
  data () {
    return {
      options3: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      visible: false,
      actionUrl: this.$all.baseUploadURL + '/me-minio/uploadImages',
      imageUrl: '',
      hasImage: false,
      cuVolunteersId: '',
      showImageUrl: '',
      cityList: [],
      saveCuVolunteersBO: {
        cuVolunteersId: '',
        dateLimit: [],
        cuVolunteersCategoryId: 0, // 标签ID
        cuVolunteersCountRecruiting: 0, // 招募人数
        cuVolunteersStartDate: null, // 活动开始时间
        cuVolunteersEndDate: null, // 活动结束时间
        cuVolunteersContact: null, // 联系人
        cuVolunteersStop: null, // 报名截止时间
        cuVolunteersLimit: '', // 报名限制
        cuVolunteersAddress: '', // 详细地址
        cuVolunteersIntroduction: '', // 活动简介
        cuVolunteersServiceContent: '', // 服务内容
        cuVolunteersTitle: '', // 标题
        cuVolunteersImg: '', /// 封面
        cuVolunteersPhone: '', // 联系人电话
        cuVolunteersUserId: this.$store.state.user.userAll.cuAdminId// 发布人ID
      },
      ruleValidate: {
        dateLimit: [
          { required: true, type: 'date', message: '时间不能为空', trigger: 'blur' }
        ],
        cuVolunteersContact: [
          { required: true, message: '联系人不能为空', trigger: 'blur' }
        ],
        cuVolunteersLimit: [
          { required: true, message: '报名限制不能为空', trigger: 'blur' }
        ],
        cuVolunteersAddress: [
          { required: true, message: '详细地址不能为空', trigger: 'blur' }
        ],
        cuVolunteersIntroduction: [
          { required: true, message: '活动简介不能为空', trigger: 'blur' }
        ],
        cuVolunteersTitle: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        cuVolunteersPhone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSuccess (res, file) {
      this.imageUrl = res
      this.hasImage = true
      this.saveCuVolunteersBO.cuVolunteersImg = res
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '图片大小限制',
        desc: '文件 ' + file.name + '太大,不能超过 2M.'
      })
    },
    handleRemove () {
      this.imageUrl = ''
      this.hasImage = false
    },
    handleView (imageUrl) {
      this.showImageUrl = imageUrl
      this.visible = true
    },
    handleChange (html, text) {
      this.saveCuVolunteersBO.cuVolunteersServiceContent = html
    },
    query () {
      this.$refs.editor.setHtml(this.saveCuVolunteersBO.cuVolunteersServiceContent)
    },
    save (name) {
      let url = 'saveOne'
      if (this.cuVolunteersId) {
        url = 'updateOne'
      }
      this.saveCuVolunteersBO.cuVolunteersStartDate = this.saveCuVolunteersBO.dateLimit[0]
      this.saveCuVolunteersBO.cuVolunteersEndDate = this.saveCuVolunteersBO.dateLimit[1]
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$axios_supermall.post('/cu-volunteers/' + url, this.saveCuVolunteersBO).then(resp => {
            if (resp.data.code == 0) {
              this.$Message.success('处理成功')
              setTimeout(() => {
                this.$router.push({ path: '/volunteers/volunteers_list' })
              }, 1000)
            } else {
              this.$Message.error(resp.data.msg)
            }
          })
        }
      })
    },
    queryOne () {
      this.$axios_supermall.post('/cu-volunteers/queryId', this.cuVolunteersId).then(resp => {
        if (resp.data.code == 0) {
          this.saveCuVolunteersBO = resp.data.data
          let date = []
          date.push(this.saveCuVolunteersBO.cuVolunteersStartDate)
          date.push(this.saveCuVolunteersBO.cuVolunteersEndDate)
          this.saveCuVolunteersBO.dateLimit = date
          this.imageUrl = this.saveCuVolunteersBO.cuVolunteersImg
          this.hasImage = true
        }
        this.$refs.editor.setHtml(this.saveCuVolunteersBO.cuVolunteersServiceContent)
      })
    },
    queryCat () {
      this.$axios_supermall.post('/cu-volunteers-category/queryList').then(resp => {
        if (resp.data.code == 0) {
          this.cityList = resp.data.data
        }
      })
    }
  },
  mounted () {
    this.cuVolunteersId = this.$route.params.id
    if (this.$route.params.id) {
      this.queryOne()
    }
    this.queryCat()
  }
}
</script>

<style scoped>
.demo-upload-list {
  display: inline-block;width: 500px;height: 300px;text-align: center;line-height: 60px;
  border: 1px solid transparent;border-radius: 4px;overflow: hidden;background: #fff;
  position: relative;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;height: 100%;
}
.demo-upload-list-cover {
  display: none;position: absolute;top: 0;bottom: 0;
  left: 0;right: 0;background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;font-size: 20px;cursor: pointer;margin: 0 2px;
}
</style>
